<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
    <meta name="author" content="Bootstrap中文网">

    <title>

        美人黛&middot;接口文档

    </title>

    <link href="../dist/css/bootstrap.min.css" rel="stylesheet">


    <!-- Documentation extras -->
    <link href="../dist/css/docs.css" rel="stylesheet">
    <link href="../dist/css/github.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../dist/hl-styles/rainbow.css"/>

    <style>
        body {
            font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif;
        }

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, .lead {
            font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }

        /*pre code {*/
        /*background: transparent;*/
        /*}*/

        @media (min-width: 768px) {
            .bs-docs-home .bs-social,
            .bs-docs-home .bs-masthead-links {
                margin-left: 0;
            }
        }

        .bs-docs-section p {
            line-height: 2;
        }

        .bs-docs-section p.lead {
            line-height: 1.4;
        }

        div#alertModal.modal.fade.bs-example-modal-sm.in {
            overflow: hidden;
        }

        .wide-modal{
            width: 800px;
        }

        .lh-20{
            line-height: 20px;
        }

    </style>

    <!--[if lt IE 9]>
    <script src="dist/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="dist/js/html5shiv.min.js"></script>
    <script src="dist/js/respond.min.js"></script>
    <![endif]-->

    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="dist/images/apple-touch-icon-144-precomposed.png">
    <link rel="shortcut icon" href="dist/images/favicon.png">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="../lib/jquery.json-viewer.css">

</head>
<body>
<a class="sr-only" href="#content">Skip to main content</a>

<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">美人黛接口</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <%
                apps.forEach(function(app){
                %>
                <li class="pt-<%=app.pathName%>">
                    <a href="/view-<%=app.pathName%>"><%=app.name%></a>
                </li>
                <%
                });
                %>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">你好，<%=trueName%></a>
                </li>
            </ul>
        </nav>
    </div>
</header>
<div >
    <p></p>
</div>
<div class="container bs-doc-container">
    <div id="connectionPanel" class="panel panel-default">
        <div class="panel-heading">
            指定调试的服务


        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="macAddress" class="col-sm-3 control-label">请填写本机的MAC地址</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="macAddress" placeholder="格式(XX-XX-XX-XX-XX-XX)">
                    </div>
                    <div class="col-sm-4">
                        <button id="macConnect" type="button" class="btn btn-primary">连接调试</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <div id="statusPanel" class="panel panel-default">
        <div class="panel-heading">
            服务及页面状态
        </div>
        <div class="panel-body">
            <dl class="dl-horizontal">
                <dt>Tomcat连接</dt>
                <dd id="stateConnect"><span class="text-muted">（无）</span></dd>
                <dt>机器名称</dt>
                <dd id="stateComName"><span class="text-muted">（无）</span></dd>
                <dt>当前调试页面</dt>
                <dd id="stateNowPath"><span class="text-muted">（无）</span></dd>
                <dt>页面位置</dt>
                <dd id="stateNowPage"><span class="text-muted">（无）</span></dd>
            </dl>
        </div>
    </div>

    <div id="dataPanel" class="panel panel-default">
        <div class="panel-heading">
            数据调试
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-success" disabled="disabled" id="applyData">应用数据</button>
                    <button type="button" class="btn btn-default" disabled="disabled" id="applyBack">回退到上一次</button>
                    <button type="button" class="btn btn-warning" disabled="disabled" id="applyClear">重新获取服务器数据</button>
                </div>
            </div>
            <p></p>
            <div class="row">
                <div class="col-sm-6">
                    <textarea id="jsonDataString" class="form-control" rows="10" disabled="disabled"></textarea>
                </div>
                <div id="jsonDataShow" class="col-sm-6 lh-20">

                </div>
            </div>
        </div>
    </div>

    <div id="dataPanel" class="panel panel-default">
        <div class="panel-heading">
            Cookie调试
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-success" disabled="disabled" id="applyCookie">应用Cookie</button>
                </div>
            </div>
            <p></p>
            <div class="row">
                <div class="col-sm-6">
                    <textarea id="jsonCookieString" class="form-control" rows="10" disabled="disabled"></textarea>
                </div>
                <div id="jsonCookieShow" class="col-sm-6 lh-20">

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modifyPageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改页面位置</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="oldPage" class="col-sm-3 control-label">原页面路径</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="oldPage" disabled="disabled" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="newPage" class="col-sm-3 control-label">新页面路径</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="newPage">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="modifyPage">修改</button>
            </div>
        </div>
    </div>
</div>

<footer class="bs-footer" role="contentinfo">
    <div class="container">

        <p>开发接口文档 &nbsp;&nbsp;&nbsp;&nbsp;<em>Author : xinxinran</em></p>

    </div>
</footer>

<script src="../dist/js/jquery.min.js"></script>
<script src="../dist/js/bootstrap.js"></script>
<script src="../dist/js/application.js"></script>

<script src="../lib/jquery.noty.packaged.min.js"></script>
<script src="../lib/jquery.json-viewer.js"></script>
<script src="../socket.io/socket.io.js"></script>


<script type="text/javascript">
    window.fakeStorage = {
        _data: {},

        setItem: function (id, val) {
            return this._data[id] = String(val);
        },

        getItem: function (id) {
            return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
        },

        removeItem: function (id) {
            return delete this._data[id];
        },

        clear: function () {
            return this._data = {};
        }
    };

    function LocalStoreManager() {
        var localSupported = !!window.localStorage;
        this.storage = localSupported ? window.localStorage : window.fakeStorage;
    }

    LocalStoreManager.prototype.get = function (key) {
        var result = this.storage.getItem(key);
        if (result && result.charAt(0) === 's') {
            return result.substring(2);
        } else if (result && result.charAt(0) === 'o') {
            try {
                return JSON.parse(result.substring(2));
            } catch (ignore) {
            }
        }
        return null;
    };

    LocalStoreManager.prototype.set = function (key, content) {
        if (typeof content === 'string') {
            content = 's:' + content;
        } else if (typeof content === 'object' && content) {
            content = 'o:' + JSON.stringify(content);
        } else {
            content = null;
        }

        content && this.storage.setItem(key, content);
    };

    LocalStoreManager.prototype.remove = function (key) {

        this.storage.removeItem(key);
    };

</script>

<script type="text/javascript">
    (function($){
        var userName = '<%=userName%>', storeManager = new LocalStoreManager(),
            socket = io.connect(window.location.protocol + '//' + window.location.host, {path : '/jsp-dev'}),
            lastData;

        function notyAlert(text, level, timeout){
            noty({
                layout : 'topCenter',
                type : level || 'error',
                text : text,
                timeout : timeout || 0
            });
        }

        function socketEmit(command, data){
            socket.connected && socket.emit(command, data);
        }

        function fixTextAreaHeight(){
            let dataShowDiv = $('#jsonDataShow'), dataTextArea = $('#jsonDataString'),
                cookieShowDiv = $('#jsonCookieShow'), cookieTextArea = $('#jsonCookieString'),
                targetHeight = dataShowDiv.height();
            if(targetHeight > 214){
                dataTextArea.css('height', targetHeight + 'px');
            }

            targetHeight = cookieShowDiv.height();
            if(targetHeight > 214){
                cookieTextArea.css('height', targetHeight + 'px');
            }
        }

        var handlers = {
            notice : function(nData){
                notyAlert(nData.text, nData.level);
            },

            macMatched : function(dInfo){
                storeManager.set('hisMacAddress', dInfo.id);

                $('#macConnect').prop('disabled', true);
                $('#stateConnect').html('<span class="text-success">连接</span>');
                $('#stateComName').html('<span class="text-primary">' + dInfo.computerName + '</span>');
            },

            deviceOffLine : function(){
                $('#stateConnect').html('<span class="text-danger">断开</span>');
                notyAlert('tomcat已经断开连接', 'warning', 1000);
            },

            deviceOnLine : function(){
                $('#stateConnect').html('<span class="text-success">连接</span>');
                notyAlert('tomcat已经恢复连接', 'success', 1000);
            },

            jspDataUpdate : function(dataInfo){
                var data = dataInfo.data || {}, cookies = dataInfo.cookies || {};
                $('#stateNowPath').html('<span class="text-info">' + dataInfo.path + '</span>');
                $('#stateNowPage').html('<a class="text-info">' + dataInfo.page + '</a>');
                $('#jsonDataString').val(JSON.stringify(data, null, 4)).prop('disabled', false);
                $('#jsonDataShow').jsonViewer(data);
                $('#jsonCookieString').val(JSON.stringify(cookies, null, 4)).prop('disabled', false);
                $('#jsonCookieShow').jsonViewer(cookies);
                fixTextAreaHeight();

                lastData = dataInfo;
            },

            jspDataUpdateWithoutPage : function(dataInfo){
                lastData = dataInfo;
            }
        };

        socket.on('connect', function(){
            socketEmit('cmdSetUserName', userName);

            $.each(handlers, function(eName, handler){
                socket.on(eName, handler);
            });

            socket.on('disconnect', function(){
                socket.removeAllListeners();
            });
        });

        $(function(){
            let lastMacAddress = storeManager.get('hisMacAddress'), newData, newCookie;

            $('#macConnect').on('click', function(){
                var macAddress = $('#macAddress').val().trim();
                if(!macAddress){
                    notyAlert('请输入本机的MAC地址', 'warning');
                    return;
                }

                macAddress = macAddress.replace(/:/g, '-').toUpperCase();
                socketEmit('cmdMacMatch', macAddress);
            });

            //$('#jsonDataShow').jsonViewer({test: 1});



            $('#jsonDataString').on('change', function(){
                let dataTextArea = $(this), newContent = dataTextArea.val(), targetObj;

                try {
                    newContent = newContent.replace(/[“”]/g, '"')
                        .replace(/[‘’]/g, '\'')
                        .replace(/[：]/g, ':')
                        .replace(/[，]/g, ',');
                    if(!newContent) newContent = "{}";
                    targetObj = JSON.parse(newContent);
                } catch (e) {
                    try {
                        targetObj = (new Function('return ' + newContent))();
                    } catch (e) {
                        targetObj = null;
                    }
                }

                if(targetObj){
                    let dataShowDiv = $('#jsonDataShow');
                    dataTextArea.val(JSON.stringify(targetObj, null, 4)).parent().removeClass('has-error');
                    $('#applyData').prop('disabled', false);
                    $('#applyBack').prop('disabled', false);
                    dataShowDiv.jsonViewer(targetObj);
                    newData = targetObj;

                    fixTextAreaHeight();
                }else{
                    $('#applyData').prop('disabled', true);
                    dataTextArea.parent().addClass('has-error')
                    notyAlert('json数据格式错误', 'warning', 5000);
                }
            });

            $('#applyData').on('click', function(){
                socketEmit('cmdApplyNewData', {data : newData, page : $('#stateNowPage').text(), path : $('#stateNowPath').text()});
                $(this).prop('disabled', true);
            });

            $('#jsonCookieString').on('change', function(){
                let cookieTextArea = $(this), newContent = cookieTextArea.val(), targetObj;

                try {
                    newContent = newContent.replace(/[“”]/g, '"')
                        .replace(/[‘’]/g, '\'')
                        .replace(/[：]/g, ':')
                        .replace(/[，]/g, ',');
                    if(!newContent) newContent = "{}";
                    targetObj = JSON.parse(newContent);
                } catch (e) {
                    try {
                        targetObj = (new Function('return ' + newContent))();
                    } catch (e) {
                        targetObj = null;
                    }
                }

                if(targetObj){
                    let cookieShowDiv = $('#jsonCookieShow');
                    cookieTextArea.val(JSON.stringify(targetObj, null, 4)).parent().removeClass('has-error');
                    $('#applyCookie').prop('disabled', false);
                    cookieShowDiv.jsonViewer(targetObj);
                    newCookie = targetObj;

                    fixTextAreaHeight();
                }else{
                    $('#applyCookie').prop('disabled', true);
                    cookieTextArea.parent().addClass('has-error');
                    notyAlert('json数据格式错误', 'warning', 5000);
                }
            });

            $('#applyCookie').on('click', function(){
                socketEmit('cmdApplyNewCookie', {setCookies : newCookie, page : $('#stateNowPage').text(), path : $('#stateNowPath').text()});
                $(this).prop('disabled', true);
            });

            $('#applyClear').on('click', function(){
                socketEmit('cmdClearPageData', {page : $('#stateNowPage').text(), path : $('#stateNowPath').text()});

                $('#jsonDataShow').empty();
                $('#jsonDataString').val('').prop('disabled', true);
                $('#jsonCookieShow').empty();
                $('#jsonCookieString').val('').prop('disabled', true);
                $('#applyData,#applyBack,#applyCookie,#applyClear').prop('disabled', true);
            });

            $('body').on('click', '.modify-page-icon', function(){
                let nowPage = $('#stateNowPage').text();
                $('#oldPage,#newPage').val(nowPage)
                $('#modifyPageModal').modal();
            });

            $('#modifyPage').on('click', function(){
                let newPage = $('#newPage').val();
                $('#modifyPageModal').modal('hide');
                socketEmit('cmdApplyNewPage', {page : newPage, path : $('#stateNowPath').text()});

                $('#stateNowPage').html('<a class="text-info">' + newPage + '</a>')
            });

            lastMacAddress && $('#macAddress').val(lastMacAddress);
        });
    })(jQuery);

</script>
</body>
</html>